<template>
  <div id="container">
    <el-card>
      <el-form ref="formSearch" :model="form" label-width="80px" style="margin-top: 20px">
        <el-form-item label="拜访人">
          <el-select
            v-model="value"
            placeholder="请选择"
            clearable
            filterable
          >
            <el-option
              v-for="item of options"
              :key="item.userId"
              :label="item.userName"
              :value="item.userName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="拜访时间">
          <el-col :span="7">
            <el-date-picker
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即查询</el-button>
          <el-button
            @click="restContent"
          >重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>


      <el-table
        v-loading="loading"
        stripe
        border
        :data="visitData"
        style="width: 100%"
      >
        <el-table-column
          label="#"
          type="index"
        >
        </el-table-column>
        <el-table-column
          label="公司名称"
          prop="companyName"
        >
        </el-table-column>
        <el-table-column
          label="法人"
          prop="legalPerson"
        >
        </el-table-column>

        <el-table-column
          label="联系电话"
          prop="phoneNumber"
        >
        </el-table-column>
        <el-table-column
          label="公司地址"
          prop="address"
        >
        </el-table-column>
        <el-table-column
          label="拜访人"
          prop="visitPerson"
        >
        </el-table-column>
        <el-table-column
          label="拜访时间"
          prop="visitTime"
        >
        </el-table-column>
        <el-table-column
          label="拜访备注"
          prop="remark"
        >
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        :pageSizes="[10, 20, 50, 100]"
        :layout="layoutPagination"
        @pagination="getVisitList"
      />
  </div>
</template>

<script>
import { requestDataOfDrawPoint } from '../../../api/system/map'
import pagination from '@/components/Pagination'
import { listUser } from '../../../api/system/user'

export default {
  name: 'index',
  components: {
    pagination
  },
  data() {
    return {
      layoutPagination: 'total,sizes, prev, pager, next',
      // 移动端分页组件的上传参数！
      mobilePaginationUpParams: {
        currentPage: 1,
        // 移动端分页总页数
        pageCount: 10
      },
      dateRange: [],
      value: '',
      options: [],
      options2: [],
      form: {
        visitPerson: '',
        date1: ''

      },
      // 操作按钮上的提示信息
      visitPersonTooltip: '',
      // 加载列表时候的那个加载圈！也就是遮罩层！
      loading: true,
      // table 列表的数据！
      visitData: [],
      //
      total: 0,
      reP: {
        isVisit: '1'
      },
      queryParams: {
        // 当前页码值的默认值
        pageNum: 1,
        pageSize: 10,
        isVisit: '1'
      }
    }
  },
  created() {
    this.getVisitList()
    this.testUser()
  },
  methods: {
    // 移动端分页组件	页码改变时触发事件
    handleVanChange(val) {
      console.log(val)
    },
    // 测试按钮(获取用户列表！)
    async testUser() {
      const res = await listUser()
      console.log(res)
      const res2 = res.rows
      this.options = res2
    },
    // 重置查询表单的内容！
    async restContent() {
      this.value = ''
      this.form.date1 = ''
      this.dateRange = []
      this.getVisitList()
    },
    // 获取查询时间
    getInquireTime() {
      const date = new Date(this.form.date1)
      let date2 = new Date(date)
      let year = date2.getFullYear()
      let month = date2.getMonth() + 1
      let dt = date2.getDate()
      if (dt < 10) {
        dt = '0' + dt
      }
      if (month < 10) {
        month = '0' + month
      }

      const uploadTime = year + '-' + month + '-' + dt
      return uploadTime
    },
    async onSubmit() {
      this.loading = true
      const timeRangeL = this.dateRange.length
      const res = await requestDataOfDrawPoint({
        isVisit: '1',
        visitPerson: this.value,
        beginTime: this.dateRange[0],
        endTime: this.dateRange[timeRangeL - 1]
        // visitTime: this.dateRange
      })
      this.visitData = res.rows
      this.total = res.total
      this.loading = false
    },
    // 获取拜访列表
    async getVisitList() {
      this.loading = true
      const res = await requestDataOfDrawPoint(this.queryParams)
      this.visitData = res.rows
      this.total = res.total
      this.loading = false
      return res
    }
  }
}
</script>

<style scoped>

</style>
